<template>
	<view class="z-box" :style="`padding-top:${BarNavHeight}px`">
		<u-navbar leftIconColor="#000" @leftClick="back" title="空间位置" :title-style="NavCss" bgColor="#f8f8f8"></u-navbar>
		<view class="search-bar">
			<view class="search-btns">
				<z-button-picker :showPicker="showYearPicker" :value="selectedYear" :list="yearColumns" @open="showYearPicker = true"
					@cancel="showYearPicker = false" @confirm="setYear"></z-button-picker>
				<z-button-picker :showPicker="showSamplingTypePicker" :value="selectedSamplingTypeName" :list="samplingTypeColumns" keyName="label"
					@open="showSamplingTypePicker = true" @cancel="showSamplingTypePicker = false" @confirm="setSamplingType" class="ml5"></z-button-picker>
				<z-button-picker :showPicker="showTaskStatusPicker" :value="selectedTaskStatusName" :list="taskStatusColumns" keyName="label"
					@open="showTaskStatusPicker = true" @cancel="showTaskStatusPicker = false" @confirm="setTaskStatus" class="ml5"></z-button-picker>
			</view>
			<view class="num">({{ markers.length }})</view>
		</view>
		<view v-show="showMap" class="z-body" :style="`height: ${mapHeight}px;`">
			<map scale="14" id="map" :latitude="latitude" :longitude="longitude" :markers="markers" :show-location="true" style="width: 100vw;"
				:style="`height: ${mapHeight}px;`"></map>
		</view>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import LayoutMix from '@/mixins/layout-mix.js'
	import NotifyMix from '@/mixins/notify-fix.js'
	import Util from '@/utils/index.js'
	import API from '@/api/index.js'
	export default {
		mixins: [LayoutMix, NotifyMix],
		data() {
			return {
				showYearPicker: false,
				yearColumns: [],
				selectedYear: '',
				showSamplingTypePicker: false,
				samplingTypeColumns: [],
				selectedSamplingTypeName: '',
				selectedSamplingTypeValue: '',
				showTaskStatusPicker: false,
				taskStatusColumns: [],
				selectedTaskStatusName: '',
				selectedTaskStatusValue: '',
				longitude: 0,
				latitude: 0,
				markers: []
			}
		},
		computed: {
			...mapState({
				mapHeight: function(state) {
					return state.system.windowHeight - state.system.statusBarHeight - 94
				},
			}),
			showMap() {
				return !this.showYearPicker && !this.showSamplingTypePicker && !this.showTaskStatusPicker
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			async initYearColumns() {
				uni.showLoading()
				const res = await API.CjTaskApi.getYearColumns()
				uni.hideLoading()
				if (res.code !== 200 || !res.data) {
					this.notifyFail('获取年份列表失败')
				}
				this.yearColumns = res.data
				this.selectedYear = res.data[0]
			},
			initSamplingType() {
				const dict =Util.DictUtil.getDict('cj_sampling_type');
				if (dict && dict.length > 0) {
					this.samplingTypeColumns = dict
					this.selectedSamplingTypeValue = dict[0].value
					this.selectedSamplingTypeName = dict[0].label
				} else {
					this.samplingTypeColumns = []
					this.selectedSamplingTypeValue = ''
					this.selectedSamplingTypeName = ''
				}
			},
			initTaskStatus() {
				let dict = Util.DictUtil.getDict('cj_task_status');
				dict = [{
					label: '全部状态',
					value: ''
				}, ...dict]
				this.taskStatusColumns = dict
				this.selectedTaskStatusValue = dict[0].value
				this.selectedTaskStatusName = dict[0].label
			},
			setYear(val) {
				this.showYearPicker = false
				if (this.selectedYear !== val) {
					this.selectedYear = val
					this.setLocations()
				}
			},
			setSamplingType(val) {
				this.showSamplingTypePicker = false
				if (this.selectedSamplingTypeName !== val.label) {
					this.selectedSamplingTypeValue = val.value
					this.selectedSamplingTypeName = val.label
					this.setLocations()
				}
			},
			setTaskStatus(val) {
				this.showTaskStatusPicker = false
				if (this.selectedTaskStatusValue !== val.value) {
					this.selectedTaskStatusValue = val.value
					this.selectedTaskStatusName = val.label
					this.setLocations()
				}
			},
			async setLocations() {
				if (Util.StringUtil.isEmpty(this.selectedYear) || Util.StringUtil.isEmpty(this.selectedSamplingTypeValue)) {
					this.dealNoMarker()
					return
				}
				const params = {
					year: this.selectedYear,
					samplingType: this.selectedSamplingTypeValue,
					taskStatus: this.selectedTaskStatusValue,
				}
				uni.showLoading()
				const res = await API.CjTaskApi.getLocations(params)
				uni.hideLoading()
				if (res.code !== 200 || !res.data) {
					this.notifyFail('获取采集记录所在位置失败')
				}
				let _markers = []
				for (let i = 0; i < res.data.length; i++) {
					_markers.push({
						longitude: Number(res.data[i].gcj02Longitude),
						latitude: Number(res.data[i].gcj02Latitude),
						title: 'Marker',
						iconPath: '/static/marker.png',
						width: 32,
						height: 32
					})
				}
				if (_markers.length > 0) {
					this.longitude = _markers[0].longitude
					this.latitude = _markers[0].latitude
					this.markers = _markers
				} else {
					this.dealNoMarker()
				}
			},
			async dealNoMarker() {
				const res = await Util.UniUtil.getLonLat()
				if (!res) {
					this.notifyFail('获取不到当前位置坐标')
				}
				console.log(res,'res')
				this.longitude = res.wgs84.longitude
				this.latitude = res.wgs84.latitude
				this.markers = []
			}
		},
		async mounted() {
			this.initSamplingType();
			this.initTaskStatus();
			await this.initYearColumns();
			this.setLocations();
		}
	}
</script>

<style lang="scss" scoped>
	.z-box {
		width: 100vw;
		height: 100vh;

		.search-bar {
			padding: 5px 5px 0 5px;
			display: flex;
			justify-content: space-between;

			.ml5 {
				margin-left: 5px;
			}
		}

		.z-body {
			overflow: hidden;
		}
	}
</style>